<template>
  <div class="page-box">
    <div>
      <ProTable ref="proTable" highlight-current-row :columns="columns" :request-api="getTableList">
        <template #createdAt="scope">
          {{ scope.row.createdAt ? dayjs(scope.row.createdAt * 1000).format("YYYY-MM-DD HH:mm:ss") : "--" }}
        </template>
        <template #operation="scope">
          <el-button type="primary" link @click="removeGoods(scope.row)">删除</el-button>
        </template>
      </ProTable>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onActivated } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getCommentList, deleteComment } from "@/api/modules/comment";
import { ElMessageBox } from "element-plus";
import { useDebounceFn } from "@vueuse/core";
import dayjs from "dayjs";

const searchForm = ref<any>({
  keyword: ""
});
const proTable = ref<ProTableInstance>();
const columns = reactive<ColumnProps<any>[]>([
  { prop: "comment", label: "评论信息", minWidth: "300" },
  { prop: "createdAt", label: "创建时间", minWidth: "100" },
  { prop: "operation", label: "操作", minWidth: "100", fixed: "right" }
]);

onActivated(() => {
  proTable.value?.getTableList();
});

const getTableList = useDebounceFn(async params => {
  const newParams = {
    pageIndex: params.pageIndex,
    pageSize: params.pageSize,
    ...searchForm.value
  };
  if (!newParams.pageIndex) {
    newParams.pageIndex = 1;
  }
  if (!newParams.pageSize) {
    newParams.pageSize = 10;
  }
  return await getCommentList(newParams);
}, 50);
const removeGoods = row => {
  ElMessageBox.confirm("确认是否删除").then(async () => {
    await deleteComment({ id: row.id });
    await proTable.value?.getTableList();
  });
};
</script>
